微信网页 本地调试方法汇总
July 02, 2020
问题
在微信服务号开发下因为微信接口的限制, 是需要配置安全域名的, 一个是微信 js 接口安全域名, 用于调用 js-SDK, 另一个是授权的时候回调页安全域名(用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠。沙盒号即测试号回调地址支持域名和 ip，正式公众号回调地址只支持域名。).
而且官方说明了, 这两个域名都是支持 80 端口的. 如果在本地开发, 将会面临一定阻碍.
- 本地开发, 特别指前后端分离的项目, 前端项目一般本地调试都是在 8080 端口, 对于一些开发来说, 本机的 80 端口是常年被占用的.
- 在本地将没办法被解析
解决方案
这里列举几种方案, 用于解决这类问题, 核心都是如何将项目映射到一个固定域名上
内网穿透
内网穿透, 即使用一个拥有外网服务器作为请求服务器, 使用内网穿透, 将内网地址上的请求通过外网服务器来转发, 可以实现将内网地址映射到外网 ip 上.
典型的应用有 ngork, natapp, 花生壳等. 例如我使用 natapp, 在 natapp 官网配置好域名和转发端口, 然后就可以在本地打开 natapp 应用和开发的项目, 将 natapp 服务器分配的域名 pakholeung.natapp1.cc 转发到本地 localhost:8080 端口上.
优点, 使用方便, 只需要配置好 natapp 就可以进行开发, 而且因为使用了内网穿透, 调试不再局限在本地, 可以直接通过分配的外网域名来访问调试.
缺点, natapp 分配的域名在使用中会不定期改变, 每次改变都要重新配置安全域名, 比较闹心, 不过可以通过购买二级域名解决. 而且访问速度取决于 natapp 分配的带宽, 一般来说免费 1M, 付费 2M, 算是够用了. 内网穿透仅限个人使用, 团队需要每人配置一份.
问: 是否可以使用穿透到内网, 在内网架设 NAT 穿透, 这样可以解决域名和带宽问题? 这个方案很有创意, 但是我觉得略微占用服务器资源, 架设 NAT 是需要服务器跑相应的 NAT 服务的, 而且感觉和 nginx 配合不是很好, 可能需要另外架设一台干净的服务器, 这就变得浪费服务器资源了. 但是, 如果在内网, 为什么不直接在内网服务器配置 nginx, 将请求转发到本机呢.
修改 DNS + nginx 代理
安全域名只是一 个域名, 微信本是不会访问的, 所以这个域名并不限定需要在外网访问到. 这样, 可以通过改写本地 DNS 列表 + 80 端口代理, 将虚拟的域名代理到本地的任意端口上, 从而实现安全接口.
这里根据颗粒度可以有几种做法. 第一种, 仅限本机访问. 即只改写本地的 DNS, 例如在本地的 DNS List 加上 www.test.cn = 127.0.0.1, 直接将 www.test.cn 解析到本地, 然后需要配置 nginx, 将本机的 80 上的请求, 代理到 8080 端口上. 完成转发. 或者直接将 devServer 配置成 80 端口, 这样连转发都不用.
优点, 访问快, 因为都是在本机进行转发, 不受限于带宽.
缺点, 仅限于本机, 别人没办法访问, 因为你只改了自己的 DNS 配置.
所以加强版是, 在上游添加 DNS 规则, 而不是在本机上, 例如在公司的服务器将本机的 DNS 规则加上. 这样, 整个内网都可以访问到你的机器. 当然你需要开放你的端口, 这样别人才会访问到.
缺点, 配置繁琐, 而且不适合在本地已经架设服务器的开发, 因为本地的 80 端口已经被占用. 另外使用手机进行调试的时候你会发现, 手机是没办法修改 DNS 的. 只能继续借助黑科技解决, 和本地开发配合不是和很好.
使用真正服务器开发
直接架设 http 服务器进行开发, 真实服务器拥有真实域名和 ip.
优点: 最接近生产环境的方案. 如果在本机构建, 一般的前端项目可以将 webpack 的 devServer 端口设置成 80, 然后就可以进行开发, 或者直接发布到内网服务器, 使用内网服务器进行开发. 又或者直接在内网服务器构建项目, 但内网的 80 端口一般已经被占用, 所以在内网进行 webpack 构建基本没什么可能, 除非又使用 nginx 转发到 devServer 端口上, 又回到了解放前.
缺点: 在本机, 是没有真实域名的, 只能使用 ip, 而安全接口测试号是可以填 ip 的, 但是这种方法没办法调试真实公众号, 除非你继续使用修改 DNS, 这种方法和上一种就没什么区别了, 省就省在不用在本机上架设 nginx. 如果是在内网服务器上进行这种操作, 就显得更加捞, 因为一样要修改 DNS, 而且只能架设一个项目, 团队中难道同时使用一个项目调试? 这样就不是很合理.
综上, 总结这么多的方案, 其实我最推崇的还是第一种方案, 基本上, 你只要交钱就可以了, 因为用钱能解决的问题都不是问题. 通过修改 DNS 的方案都不是好方案. 修改 nginx 的方案也不是好方案.